<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>

<table id="dataTable" border="1" cellpadding ="0"  cellspacing="0"  style="color: royalblue "  >
    <tr>
        <th colspan="5">所有员工信息</th>
    </tr>
    <tr>
        <th style="color: blue">id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options</th>
    </tr>
    <tr th:each="employee : ${employeeList}">
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td th:text="${employee.gender}"></td>
        <td>
            <a class="deleteA" @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">删除</a>
            <a th:href="@{'/employee/'+${employee.id}}">修改</a>
        </td>
    </tr>
</table>
<form id="deleteForm" method="post">
    <input type="hidden" name="_method" value="delete">

</form>

<h3>新增人员信息</h3>
<form th:action="@{/employee}" method="post">
    id<input type="text" name="id" ><br>
    lastName <input type="text" name="lastName" ><br>
    email <input type="text" name="email" ><br>
    gender:<input type="radio" name="gender" value="1" >male
    <input type="radio" name="gender" value="0" >female<br>
    <input type="submit" value="新增">

</form>






<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>

<script type="text/javascript">
    var vue = new Vue({
        el:"#dataTable",
        methods: {

            deleteEmployee:function(event)
    {
        var deleteFrom = document.getElementById("deleteForm");//根据id获取表单元素
        deleteFrom.action = event.target.href; //将触发点击事件的超链接的href属性赋值给表单的action
        deleteFrom.submit();//提交表单
        event.preventDefault();//取消超链接的默认行为


    }

    }

    });
</script>
</body>
</html>